<template>
    <transition name="ph-fade">
    <div :class="cns" v-if="visible">
        <ph-icon icon="warning" ph-mr/>
        <slot></slot>
        <ph-icon v-if="closable" class="ph-alert-close" :rightFixed="true" icon="close" @click="$emit('close')"></ph-icon>
    </div>
    </transition>
</template>
<script lang="ts">
import { defineComponent,computed } from 'vue'
import PhIcon from './icon.vue'
export default defineComponent({
    props:{
        type:{
            type:String,
            default:"warning"
        },
        closable:{
            type:Boolean,
            default:false
        },
        visible:{
            type:Boolean,
            default:false
        }
    },
    setup(props) {
     const cns = computed(()=>{
         return ["ph-alert-bar","ph-alert-bar-"+props.type]
     })
     return {cns}
    },
    components:{PhIcon}
})
</script>
<style lang="scss">
.ph-alert-bar{
    position: relative;
    padding:  var(--phx) var(--ph-20);
    margin-bottom: var(--ph-20);
    border-radius: 4px;
    color:var(ph-light-color);
    font-size: var(--phx);
    --ph-alert-color:var(--ph-c);
    --ph-alert-bg:var(--ph-light-l1);
    --ph-alert-bd:var(--ph-bd-light);
    &-success{
        --ph-alert-color:var(--ph-success-color);
        --ph-alert-bg:var(--ph-success-bg);
        --ph-alert-bd:var(--ph-success-bd);
    }
    &-primary{
        --ph-alert-color:var(--ph-primary-color);
        --ph-alert-bg:var(--ph-primary-bg);
        --ph-alert-bd:var(--ph-primary-bd);
    }
    &-danger{
        --ph-alert-color:var(--ph-danger-color);
        --ph-alert-bg:var(--ph-danger-bg);
        --ph-alert-bd:var(--ph-danger-bd);
    }
    &-info{
        --ph-alert-color:var(--ph-info-color);
        --ph-alert-bg:var(--ph-info-bg);
        --ph-alert-bd:var(--ph-info-bd);
    }
    &-warning{
        --ph-alert-color:var(--ph-warning-color);
        --ph-alert-bg:var(--ph-warning-bg);
        --ph-alert-bd:var(--ph-warning-bd);
    }
    color:var(--ph-alert-color);
    background-color:var(--ph-alert-bg);
    border:1px solid var(--ph-alert-bd);
    a,button{
        background-color: transparent!important;
        color:inherit!important;
        font-weight: bold;
        cursor: pointer;
        border:none;
        outline:none;
    }
    .ph-alert-close{
        cursor: pointer;
        opacity: .7;
        &:hover{
            opacity: 1;
        }
    }
}
</style>
